<template>
    <div class='count'>
        <slot>
            <div>￥ {{price}}</div>
        </slot>
        <div class="count_btn">
            <div  :class="{decrease:true,decrease_least:counts==flag}" @click.stop="decrease">-</div>
            <div class="input_num">
                <div class="input_num_layer"></div>
                <input type="number" v-model='counts' readonly>
            </div>
            <div class="increase" @click.stop="increase">+</div>
        </div>
    </div>
</template>
<script>
export default {
    props:['stock'],
    name:'count',//计数框
    data() {
        return {
            counts:1,
            flag:1
        }
    },
    watch: {
        counts(nval,oval){
            this.$emit('numberChange',nval)
        }
    },
    methods: {
        decrease(){  
            if(this.counts>1){
                this.counts--;
            }
        },
        increase(){
            let con=this.counts
            if(this.stock && con+1<this.stock){
                this.counts++
            }
        }
    },
}
</script>
<style scoped>
    .count{
        width:100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .count_btn{
        margin-right:40px;
        display: flex;
        width:100px;
        height: 25px;
        line-height: 25px;
        text-align: center;
    }
    .decrease,.increase{
        border: 1px solid #eee;
        width:30px;
        height: 100%;
    }
    .decrease{
        border-radius: 5px 0 0 5px;
    }
    .increase{
        border-radius: 0 5px 5px 0;
    }
    .count_btn input{
        flex:1;
        border-top:1px solid #eee;
        border-bottom:1px solid #eee;
        height:100%;
        min-height: 0 !important;
    }
    .decrease_least{
        background:#eee;
    }

    .input_num{
      position: relative;
      flex:1;
    }
    .input_num_layer{
      position: absolute;
      width:100%;
      height:100%;
      z-index:3;
    }
</style>